<template>
  <el-card class="box-card">
    <breadcrumb :naviItems.sync="naviItems"></breadcrumb>
    <div class="container">
      <!-- 控件容器 -->
      <div class="search" style="width: 100%">
        <!-- 表头搜索控件 -->
        <div class="input" style="width: 25%;">
          <el-input placeholder="搜索关键词" v-model="keywords" size="small" clearable></el-input>
        </div>
        <div class="input" style="width: 15%;text-align: center">
          <el-input placeholder="设备编号" v-model="args.GasId" size="small" clearable></el-input>
        </div>

        <div class="input" style="width: 15%;text-align: center">
          <el-input placeholder="使用单位" v-model="args.SydwName" style="" size="small" clearable></el-input>
        </div>
        <div class="input" style="width: 10%">
          <el-button type="primary" style="width: 100%" size="small">查询</el-button>
        </div>
        <div class="input" style="width: 10%">
          <el-button style="width: 100%" size="small">重置</el-button>
        </div>
        <div class="input" style="width: 10%; margin-left: 8.5%">
          <el-button type="text" size="small">高级筛选</el-button>
        </div>
      </div>
      <div class="btns" style="width: 100%;">
        <!-- 按钮 -->
        <el-row :gutter="10" style="width: 100%">   <!-- 按理说el-row标签会自动占满呀，-->
          <el-col :span="2">
            <div class="input">
              <el-button type="primary" style="width: 100%" size="small">添加</el-button>
            </div>
          </el-col>
          <el-col :span="2">
            <div class="input">
              <el-button type="primary" style="width: 100%" size="small">导入</el-button>
            </div>
          </el-col>
          <el-col :span="2">
            <div class="input">
              <el-button type="primary" style="width: 100%" size="small">导出</el-button>
            </div>
          </el-col>
          <el-col :span="2">
            <div class="input">
              <el-button type="primary" style="width: 100%" size="small">删除</el-button>
            </div>
          </el-col>
          <el-col :span="2" :offset="12">
            <div style="text-align:right;">
              <span class="iconfont">&#xe7b9;</span>
              &nbsp;
              <i class="el-icon-s-grid" style="font-size: 25px; color: #0099ff;padding-top: 6px"></i>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="table">
        <!-- 表格容器 -->
        <div class="container">
          <el-table v-loading="loading" border :data="tableData" max-height="618" style="width: 100%">
            <el-table-column fixed prop="id" label="序号" width="80"></el-table-column>
            <el-table-column prop="f002" label="设备编号" width="100"></el-table-column>
            <el-table-column prop="f003" label="设备类型" width="120"></el-table-column>
            <el-table-column prop="f001" label="使用单位" width="200"></el-table-column>
            <el-table-column prop="f004" label="灌顶形式" width="100"></el-table-column>
            <el-table-column prop="f006" label="公称容积" width="100"></el-table-column>
            <el-table-column prop="f007" label="设计压力" width="120"></el-table-column>
            <el-table-column prop="f008" label="设计温度" width="120"></el-table-column>
            <el-table-column prop="f029" show-overflow-tooltip label="定检数据" width="90"></el-table-column>
            <el-table-column prop="f030" show-overflow-tooltip label="点检数据" width="90"></el-table-column>
            <el-table-column prop="f031" show-overflow-tooltip label="检测数据" width="90"></el-table-column>
            <el-table-column prop="f032" show-overflow-tooltip label="维修数据" width="90"></el-table-column>
            <el-table-column prop="f033" show-overflow-tooltip label="监控数据" width="90"></el-table-column>
<!--            <el-table-column prop="detectionData" label="监测数据" width="90"></el-table-column>-->
          </el-table>
        </div>
      </div>
      <div class="page">
        <div class="container">
          <el-pagination
            background
            @size-change="pageSizeChange"
            @current-change="pageChange"
            :current-page="currentPage"
            :page-sizes="[10, 15, 20, 40]"
            :page-size="args.num"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </el-card>
</template>
<script>
import {DataCloudSearchArgs, serachDataCloudList} from '../../../../api/chuguan/data-cloud';
import Breadcrumb from '../BreadCrumb/BreadCrumb.vue'

export default {
  name: 'ChuGuanDataCloud',
  data() {
    return {
      args: new DataCloudSearchArgs(),
      keywords: '',
      tableData: [],
      total: 146,
      currentPage: 1,
      naviBasicItems: [{text: '储罐'}, {text: '数据上云', to: '/chuguandataToCloud'}],
      naviItems: [],
      loading: false,
    }
  },
  components: {
    Breadcrumb,
  },
  created() {
    (this.args.SydwName = null),
      (this.args.chuguanId = null),
      (this.args.pageNum = 0),
      (this.args.pageSize = 10),
      (this.naviItems = [...this.naviBasicItems])
    this.searchData()
  },
  methods: {
    // 向后端发请求获得数据
    async searchData() {
      this.loading = true
      const res = await serachDataCloudList(this.args)
      this.loading = false
      // console.log(res)
      const list = res.data.data
      //this.total = total
      // 填充登记数据，定检数据，重装数据三列
      list.map((item) => {
        if (item.detectionData != '' || item.detectionData != null) {
          item.detectionData = '/'
        }
      })
      this.tableData = list
    },
    // 页面大小改变
    async pageSizeChange(pageSize) {
      this.args.pageSize = pageSize
      this.searchData()
    },
    // 页数改变
    async pageChange(page) {
      console.log('现在是第 ', this.currentPage, ' 页')
      this.currentPage = page
      this.args.pageNum=page
      this.searchData()
    },
  },
}
</script>
<style lang="less" scoped>
div.container {
  padding: 20px;
  display: flex;
  flex-direction: column;

  div.search {
    width: 100%;
    // height: 200px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    div.input {
      padding: 5px;
    }
  }

  div.btns {
    width: 100%;
    // height: 200px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    div.input {
      padding: 5px;
    }
  }

  div.table {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;

    div.container {
      width: 95.5%;
      position: relative;
      left: -15px;
    }
  }

  div.page {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    position: relative;
    right: 70px;
  }

  //iconfont的使用
  @font-face {
    font-family: 'iconfont';
    src: url('../../../../icons/iconfont/iconfont.woff2?t=1625151297720') format('woff2'),
    url('../../../../icons/iconfont/iconfont.woff?t=1625151297720') format('woff'),
    url('../../../../icons/iconfont/iconfont.ttf?t=1625151297720') format('truetype');
  }

  .iconfont {
    font-family: "iconfont" !important;
    font-size: 25px;
    color: #0099ff;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}
</style>
